<template>
  <div style="padding: 20px;">
    <el-table
      :data="tableData"
      style="width: 1000px;"
    >
      <el-table-column  prop="procDefName" label="名称"/>
      <el-table-column  prop="procDefKey" label="模型标识"/>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button :loading="queryLoading" class="filter-item" size="mini" type="primary" plain icon="el-icon-edit" @click="handleStartProc(scope.row)">
            创建申请单
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="color: red; padding-top: 30px; font-size: 13px;">提示：申请单创建成功后，请至【我的待办任务】中查询处理。</div>
  </div>
</template>

<script>
  import {queryStartFormKey, startProc, selectFormById} from './api/dynamicApi'

  export default {
    name:'TmptFormCreateList',
    props:{
    },
    data () {
      return {
        form:{},
        dynamicFormId:'',
        tableData:[
          {
            procDefName: "请假申请单",
            procDefKey: "wf-2205272327-8413",
          },
          {
            procDefName: "员工转正申请",
            procDefKey: "wf-2205282328-7183",
          },
          {
            procDefName: "合同审批单2",
            procDefKey: "待生效",
          },
          {
            procDefName: "员工合同审批",
            procDefKey: "待生效",
          }
        ]
      }
    },
    async mounted() {
      await this.init();
      await this.initFormSheet();
    },
    methods: {
      async init() {
      },
      // start a process
      handleStartProc(row) {
        const procDef = {}
        procDef.key = row.procDefKey
        procDef.name = row.procDefName
        //procDef.userId = "262" // 发送人
        //procDef.assigneeUserId = "262" // 测试定时任务发起的流程
        startProc(procDef).then(r => {
          this.notify(r)
        })
      }
    }
  }
</script>
